<template>
  <div>

    <div class="app-container ">

      <el-tabs v-model="activeName" style="background: rgb(255, 255, 255);width: 600px;margin: 0px 0px 0px 500px;border-radius: 10px;">
        <el-tab-pane style="padding-top:10px" label="小程序订阅消息配置" name="小程序订阅消息配置">
          <el-alert title="小程序需要加以下类目" type="info" show-icon>
            <div>
              生活服务>家政服务<br>
              商家自营>3C数码
            </div>
          </el-alert>
          <br>
          <br>
          <el-form ref="form" size="small" :model="form" :rules="rules" label-width="180px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="订单支付">
                  <el-input
                    v-model="form.pay_tpl"
                    style="width: 300px;margin-right: 6px;"
                    auto-complete="off"
                    clearable
                    placeholder="请输入订单支付"
                  />
                  <el-button size="small" type="primary" plain @click="gettplid('pay_tpl')">获取</el-button>
                  <!-- <div class="help-block">用户支付完成后向用户发送消息</div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="退款通知">
                  <el-input
                    v-model="form.refund_tpl"
                    style="width: 300px;margin-right: 6px;"
                    auto-complete="off"
                    clearable
                    placeholder="请输入退款通知"
                  />
                  <el-button size="small" type="primary" plain @click="gettplid('refund_tpl')">获取</el-button>
                 <!-- <div class="help-block">用户取消订单后向用户发送消息，若订单已付款则在后台审核通过后向用户发送消息</div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="订单指派通知">
                  <el-input
                    v-model="form.staff_tpl"
                    style="width: 300px;margin-right: 6px;"
                    auto-complete="off"
                    clearable
                    placeholder="请输入订单发货"
                  />
                  <el-button size="small" type="primary" plain @click="gettplid('staff_tpl')">获取</el-button>
                 <!-- <div class="help-block">后台指派师傅后向用户发送消息</div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="尾款支付通知">
                  <el-input
                    v-model="form.itional_tpl"
                    style="width: 300px;margin-right: 6px;"
                    auto-complete="off"
                    clearable
                    placeholder="请输入尾款支付通知"
                  />
                  <el-button size="small" type="primary" plain @click="gettplid('itional_tpl')">获取</el-button>
                 <!-- <div class="help-block">如果需要支付尾款，推送给用户(服务项目允许尾款)</div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="服务完成通知">
                  <el-input
                    v-model="form.complete_tpl"
                    style="width: 300px;margin-right: 6px;"
                    auto-complete="off"
                    clearable
                    placeholder="请输入服务完成通知"
                  />
                  <el-button size="small" type="primary" plain @click="gettplid('complete_tpl')">获取</el-button>
                 <!-- <div class="help-block">服务完成，推送给用户</div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="订单发货">
                  <el-input
                    v-model="form.send_tpl"
                    style="width: 300px;margin-right: 6px;"
                    auto-complete="off"
                    clearable
                    placeholder="请输入订单发货"
                  />
                  <el-button size="small" type="primary" plain @click="gettplid('send_tpl')">获取</el-button>
                <!--  <div class="help-block">后台发货后向用户发送消息</div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button size="small" type="primary" @click="submit">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane style="padding-top:10px" label="公众号模板消息配置" name="公众号模板消息配置">
          <el-form ref="form_message" size="small" :model="messagetpl" :rules="rules" label-width="180px">
           
            <el-row>
              <el-col :span="24">
                <el-form-item label="订单支付">
                  <el-input v-model="messagetpl.pay_tpl" auto-complete="off" clearable placeholder="请输入订单支付" style="width: 300px;margin-right: 6px;"/>
                  <div class="help-block">客户支付成功，平台师傅/管理员会收到通知(OPENTM417184616)</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="退款通知">
                  <el-input v-model="messagetpl.refund_tpl" auto-complete="off" clearable placeholder="请输入退款通知" style="width: 300px;margin-right: 6px;"/>
                  <div class="help-block">订单退款，平台管理员会收到通知</div>
                </el-form-item>
              </el-col>
            </el-row>
			
			<el-row>
			  <el-col :span="24">
			    <el-form-item label="默认ID">
			      <el-input v-model="messagetpl.default_tpl" auto-complete="off" clearable placeholder="请输入默认ID" style="width: 300px;margin-right: 6px;"/>
			      <div class="help-block">如果其的模板没有设置，统一使用这个模板发送</div>
			    </el-form-item>
			  </el-col>
			</el-row>
			
            <el-row>
              <el-col :span="24">
                <el-form-item label="平台推荐订单通知">
                  <el-input v-model="messagetpl.undertake_tpl" auto-complete="off" clearable placeholder="请输入平台推荐订单通知" style="width: 300px;margin-right: 6px;"/>
                  <div class="help-block">有符合师傅接的单会通知(OPENTM416673651)</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="平台派单/师傅接单">
                  <el-input v-model="messagetpl.technical_tpl" auto-complete="off" clearable placeholder="请输入师傅接单" style="width: 300px;margin-right: 6px;"/>
                  <div class="help-block">派单给师傅通知(OPENTM416673651)</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button size="small" type="primary" @click="submit_message">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane style="padding-top:10px" label="腾讯云语音通知" name="腾讯云语音通知">
          <el-form ref="tencent_form" size="small" :model="tencent" :rules="rules" label-width="180px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="腾讯云appid" prop="tencent_cloud_appid">
                  <el-input v-model="tencent.tencent_cloud_appid" auto-complete="off" clearable
                            placeholder="请输入腾讯云appid" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="腾讯云secretId" prop="tencent_cloud_secretId">
                  <el-input v-model="tencent.tencent_cloud_secretId" auto-complete="off" clearable
                            placeholder="请输入腾讯云secretId" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="腾讯云secretKey" prop="tencent_cloud_secretKey">
                  <el-input v-model="tencent.tencent_cloud_secretKey" auto-complete="off" clearable
                            placeholder="请输入腾讯云secretKey" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="师傅电话通知模版id" prop="phone_notify_template_id">
                  <el-input v-model="tencent.phone_notify_template_id" auto-complete="off" clearable
                            placeholder="请输入师傅电话通知模版id" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="请输入平台电话通知模版id" prop="phone_site_notify_template_id">
                  <el-input v-model="tencent.phone_site_notify_template_id" auto-complete="off" clearable
                            placeholder="请输入平台电话通知模版id" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="是否开启平台通知">
                  <el-radio-group v-model="tencent.phone_site_notify_open">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="平台通知电话 多个 (,) 隔开" prop="phone_site_notify">
                  <el-input v-model="tencent.phone_site_notify" auto-complete="off" clearable
                            placeholder="请输入平台通知电话" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button size="small" type="primary" @click="submit_tencent">保存设置</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane style="padding-top:10px" label="短信配置" name="短信配置">
          <el-alert title="阿里云短信接口配置" type="info" show-icon>
          </el-alert>
          <br>
          <br>

          <el-form ref="form_sms" size="small" :model="sms" :rules="rules" label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="开启" prop="status">
                <el-switch v-model="sms.status" active-value="1" inactive-value="0" />
              </el-form-item>
            </el-col>
          </el-row>
          <block v-if="sms.status==1">
            <el-row>
              <el-col :span="24">
                <el-form-item label="AccessKeyId">
                  <el-input v-model="sms.AccessKeyId" auto-complete="off" clearable placeholder="请输入AccessKeyId" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="Secret">
                  <el-input v-model="sms.Secret" auto-complete="off" clearable placeholder="请输入Secret" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="SignName(签名)">
                  <el-input v-model="sms.SignName" auto-complete="off" clearable placeholder="请输入SignName" style="width: 300px;margin-right: 6px;"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="TemplateCode(模板编号)">
                  <el-input
                    v-model="sms.TemplateCode"
                    auto-complete="off"
                    clearable
                    placeholder="请输入TemplateCode(模板编号)"
					style="width: 300px;margin-right: 6px;"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </block>
            <el-form-item>
              <el-button size="small" type="primary" @click="submit_sms">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>

    </div>
  </div>
</template>
<script>
export default {
  name: 'Configsubscribemessage',
  components: {},
  data() {
    return {
      form: {},
      sms:{},
      tencent: {},
      messagetpl: {},
      loading: false,
      activeName: '小程序订阅消息配置',
      rules: {}
    }
  },
  mounted() {
    this.$api.post('/config/getInfo', {
      mo: 'sms'
    }).then(res => {
      this.sms = JSON.stringify(res.data) == '[]' ? {} : res.data
      this.setDefaultVal('keyword')
    })

    this.$api.post('/config/getInfo', {
      mo: 'subscribemessage'
    }).then(res => {
      this.form = JSON.stringify(res.data) == '[]' ? {} : res.data
      this.setDefaultVal('keyword')
    })

    this.$api.post('/config/getInfo').then(res => {
      this.tencent = JSON.stringify(res.data) == '[]' ? {} : res.data
      this.setDefaultVal('keyword')
    })

    this.$api.post('/config/getInfo', {mo: 'messagetpl'}).then(res => {
      this.messagetpl = JSON.stringify(res.data) == '[]' ? {} : res.data
      this.setDefaultVal('keyword')
    })
  },
  methods: {
    submit_sms() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$api.post('/config/update', this.sms).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    submit_tencent() {
      this.$refs['tencent_form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$api.post('/config/update', this.tencent).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$api.post('/config/update', this.form).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    submit_message() {
      this.$refs['form_message'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$api.post('/config/update', this.messagetpl).then(res => {
            this.$message({message: '操作成功', type: 'success'})
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    gettplid(tpl) {
      this.$api.post('/config/getsubscribemessage', {
        tpl: tpl
      }).then(res => {
        this.form = JSON.stringify(res.data) == '[]' ? {} : res.data
      }).catch(() => {

      })
    },
    setDefaultVal(key) {
      if (this.form[key] == null || this.form[key] == '') {
        this.form[key] = []
      }
    }
  }
}
</script>
